<template>
	<div class="add_logistics">
		<el-breadcrumb separator="/">
		<head-title :title="'物流--'+title+'物流点'"></head-title>
		</el-breadcrumb>
		<el-card>
			<el-form :model="infoForm" :rules="infoFormRules" ref="infoForm" label-width="120px">
				<div class="content-info">
					<p class="title">物流信息</p>
					<el-form-item label="物流名称:" prop="company_name">
						<el-input v-model="infoForm.company_name" placeholder="请输入物流名称" clearable></el-input>
					</el-form-item>
					<p class="title">始发站物流地址</p>
					<el-row>
						<el-col :span="8">
							<el-form-item label="联系人:" prop="start_consignee">
								<el-input v-model="infoForm.start_consignee" placeholder="联系人名称" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="手机号码:" prop="start_mobile">
								<el-input v-model="infoForm.start_mobile" placeholder="请输入手机号码" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="座机号:" prop="start_landline">
								<el-input v-model="infoForm.start_landline" placeholder="请输入座机号" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="provinceCityArea">
						<el-row>
							<el-col :span="8">
								<el-form-item label="省:" prop="start_province_id">
									<el-select v-model="infoForm.start_province_id" placeholder="省" @change="province(0)">
										<el-option v-for="item in cityJson" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="市:" prop="start_city_id">
									<el-select v-model="infoForm.start_city_id" placeholder="市" @change="citySelect(0)">
										<el-option v-for="item in cityList1" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="区:" prop="start_district_id">
									<el-select v-model="infoForm.start_district_id" placeholder="区">
										<el-option v-for="item in areaList1" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="详细地址:" prop="start_address">
							<el-input v-model="infoForm.start_address" placeholder="请输入详细地址" clearable></el-input>
						</el-form-item>
					</div>
					<p class="title">终点站物流地址</p>
					<el-row>
						<el-col :span="8">
							<el-form-item label="联系人:" prop="end_consignee">
								<el-input v-model="infoForm.end_consignee" placeholder="联系人名称" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="手机号码:" prop="end_mobile">
								<el-input v-model="infoForm.end_mobile" placeholder="请输入手机号码" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="座机号:" prop="end_landline">
								<el-input v-model="infoForm.end_landline" placeholder="请输入座机号" clearable></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="provinceCityArea">
						<el-row>
							<el-col :span="8">
								<el-form-item label="省:" prop="end_province_id">
									<el-select v-model="infoForm.end_province_id" placeholder="省" @change="province(1)">
										<el-option v-for="item in cityJson" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="市:" prop="end_city_id">
									<el-select v-model="infoForm.end_city_id" placeholder="市" @change="citySelect(1)">
										<el-option v-for="item in cityList2" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="8">
								<el-form-item label="区:" prop="end_district_id">
									<el-select v-model="infoForm.end_district_id" placeholder="区">
										<el-option v-for="item in areaList2" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item label="详细地址:" prop="end_address">
							<el-input v-model="infoForm.end_address" placeholder="请输入详细地址" clearable></el-input>
						</el-form-item>
					</div>
					<el-button type="primary" style="margin-left: 38px;" @click="submitForm('infoForm')">保存</el-button>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '添加',
				cityJson: '',
				cityList1: '',
				areaList1: '',
				cityList2: '',
				areaList2: '',
				infoForm: {
					company_name: '',
					start_consignee: '',
					start_mobile: '',
					start_landline: '',
					start_province_id: '',
					start_city_id: '',
					start_district_id: '',
					start_address: '',
					end_consignee: '',
					end_mobile: '',
					end_landline: '',
					end_province_id: '',
					end_city_id: '',
					end_district_id: '',
					end_address: ''
				},
				// 校对规则
				infoFormRules: {
					company_name: [{
						required: true,
						message: '请输入物流名称'
					}],
					start_consignee: [{
						required: true,
						message: '请输入联系人名字'
					}],
					start_mobile: [{
						required: true,
						message: '请输入手机号码'
					}],
					start_landline: [{
						required: true,
						message: '请输入座机号'
					}],
					start_province_id: [{
						required: true,
						message: '请选择省'
					}],
					start_city_id: [{
						required: true,
						message: '请选择市'
					}],
					start_district_id: [{
						required: true,
						message: '请选择区'
					}],
					start_address: [{
						required: true,
						message: '请输入详细地址'
					}],
					end_consignee: [{
						required: true,
						message: '请输入联系人名字'
					}],
					end_mobile: [{
						required: true,
						message: '请输入手机号码'
					}],
					end_province_id: [{
						required: true,
						message: '请选择省'
					}],
					end_city_id: [{
						required: true,
						message: '请选择市'
					}],
					end_district_id: [{
						required: true,
						message: '请选择区'
					}],
					end_landline: [{
						required: true,
						message: '请输入座机号'
					}],
					end_address: [{
						required: true,
						message: '请输入详细地址'
					}]
				}
			};
		},
		methods: {
			// 初始化列表
			init() {
				this.cityJson = require('@/utils/city.json');
				if (this.$route.query.id != undefined) {
					this.title = '编辑'
					let data = {
						address_id: this.$route.query.id
					};
					this.$http(this.$ApiList.LogisticsItem, data).then(res => {
						this.infoForm = res.datas;
						for (let i in this.cityJson) {
							if (this.cityJson[i].areaId == this.infoForm.start_province_id) {
								this.cityList1 = this.cityJson[i].cities;
							}
						}
						for (let j in this.cityList1) {
							if (this.cityList1[j].areaId == this.infoForm.start_city_id) {
								this.areaList1 = this.cityList1[j].counties;
							}
						}

						for (let i in this.cityJson) {
							if (this.cityJson[i].areaId == this.infoForm.end_province_id) {
								this.cityList2 = this.cityJson[i].cities;
							}
						}
						for (let j in this.cityList2) {
							if (this.cityList2[j].areaId == this.infoForm.end_city_id) {
								this.areaList2 = this.cityList2[j].counties;
							}
						}
					});
				}
				//console.log(cityJson)
			},
			province(type) {
				if (type == 0) {
					for (let i in this.cityJson) {
						if (this.cityJson[i].areaId == this.infoForm.start_province_id) {
							this.cityList1 = this.cityJson[i].cities;
						}
					}
					this.infoForm.start_city_id = this.cityList1[0].areaId;
					this.citySelect(0);
				} else {
					for (let i in this.cityJson) {
						if (this.cityJson[i].areaId == this.infoForm.end_province_id) {
							this.cityList2 = this.cityJson[i].cities;
						}
					}
					this.infoForm.end_city_id = this.cityList2[0].areaId;
					this.citySelect(1);
				}
			},
			citySelect(type) {
				if (type == 0) {
					for (let i in this.cityList1) {
						if (this.cityList1[i].areaId == this.infoForm.start_city_id) {
							this.areaList1 = this.cityList1[i].cities;
						}
					}
					this.infoForm.start_district_id = this.areaList1[0].areaId;
				} else {
					for (let i in this.cityList2) {
						if (this.cityList2[i].areaId == this.infoForm.end_city_id) {
							this.areaList2 = this.cityList2[i].cities;
						}
					}
					this.infoForm.end_district_id = this.areaList2[0].areaId;
				}
			},
			//提交
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						if (this.$route.query.id != undefined) {
							this.$http(this.$ApiList.UpdateLogistics, this.infoForm).then(res => {
								this.$layer.msg('保存成功');
								if (this.$route.query.type == 1) {
									this.$router.push({
										path: '/b_logistics_list',
										query: {
											user_id: this.infoForm.user_id
										}
									});
								} else {
									this.$router.push({
										path: '/logistics_list'
									});
								}
							});
						} else {
							if (this.$route.query.store_id == undefined) {
								// 商家自己添加
								this.$http(this.$ApiList.UpLogistics, this.infoForm).then(res => {
									this.$layer.msg('保存成功');
									this.$router.push({
										path: '/logistics_list'
									});
								});
							} else {
								this.infoForm.store_id = this.$route.query.store_id
								// 平台帮商家添加
								this.$http(this.$ApiList.AddLogistics, this.infoForm).then(res => {
									this.$layer.msg('保存成功');
									this.$router.push({
										path: '/b_logistics_list',
										query: {
											user_id: this.$route.query.user_id
										}
									});
								});
							}
						}
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style>
	.add_logistics .content-info {
		width: 800px;
	}

	.add_logistics .title {
		margin-left: 40px;
	}
</style>
